<template>
  <div>
    <h1>App...</h1>
    <!-- 默认插槽 -->
    <A>
      <!-- 传递标签数据 -->
      <p>hello AAAA</p>
    </A>

    <!-- template标签相当于React中Fragment，不能生成DOM结构，template不能作为根元素 -->
    <template>
      <p>测试~~~</p>
    </template>

    <!--
      命名插槽、具名插槽

      v-slot:header 给模板内容取一个名称
    -->
    <B>
      <template v-slot:header>
        <!-- slot="header" 旧语法，不推荐使用 -->
        <!-- <template slot="header"> -->
        <header>BBBB header</header>
      </template>
      <template v-slot:footer>
        <footer>BBBB footer</footer>
      </template>
    </B>

    <!--
      作用域插槽：
        - 子组件给父组件传递数据
        - 子组件
          <slot :xxx="xxx" />
        - 父组件
          <template v-slot:yyy="{ xxx }">
            {{xxx}}
          </template>
     -->
    <C>
      <template #header="scopedSlot">
        <header>{{ scopedSlot.msg }} header</header>
      </template>

      <template #footer="{ msg }">
        <footer>{{ msg }} footer</footer>
      </template>
    </C>
  </div>
</template>

<script>
import A from "./views/A";
import B from "./views/B";
import C from "./views/C";

export default {
  name: "App",
  components: {
    A,
    B,
    C,
  },
};
</script>

<style>
</style>
